<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Lists</title>
  <meta name="description" content="Displaying an enumeration of a set of items ">

  <link rel="stylesheet" href="../lists.css">

  <!--
    This <style> and <link> is only used for the example code, is no needed for the real case use
  -->
  <link rel="stylesheet" href="../../style/headers.css">
  <link rel="stylesheet" href="../../style/switches.css">
  <link rel="stylesheet" href="../../style/buttons.css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }

    body {
      background: none;
    }

    h2.pack-docs {
      font-size: 1.8rem;
      font-weight: 300;
      color: #666;
      margin: -1px 0 0;
      background-color: #f5f5f5;
      padding: 0.4rem 0.4rem 0.4rem 3rem;
      border: solid 1px #e8e8e8;
    }

    h2.pack-docs:first-child {
      margin-top: 0;
    }

    [data-type="list"] li img[alt="placeholder"] {
      background: #ccc url();
      background-size: 100% 100%;
      font-size: 0;
    }

    [data-type="list"] aside.icon-callout {
      background-image: url();
    }

    [data-type="list"] aside.icon-nopic {
      background-image: url();
      background-position: bottom right;
    }

    #settings-list { background-color: #eff0eb; }
    #settings-list li { border-color: #dcdcdc; }
    #settings-list button { max-width: 8rem; margin: 1rem 1rem 0 0; }
    #settings-list aside label { margin: 0 1rem 0 0; height: 100%; }
    #settings-list > header h2 { margin: 0 1.5rem; }

  </style>
</head>

<body role="application">

  <section data-type="list">
    <header>Title</header>
    <ul>
      <li>
        <p>Margherita <strong>Gomez</strong></p>
      </li>
      <li>
        <a href="#">
          <p>Margherita Clickable <strong>Gomez</strong></p>
        </a>
      </li>
      <li>
        <aside class="pack-end">
          <img alt="placeholder" src="myimage.jpg">
        </aside>
        <a href="#">
          <p>Margherita <strong>Gomez</strong></p>
          <p>Family</p>
        </a>
      </li>
    </ul>

    <header>Another title</header>
    <ul>
      <li aria-disabled="true">
        <aside class="pack-end">
          <img alt="placeholder" src="myimage.jpg">
        </aside>
        <a href="#">
          <p>Margherita <strong>Gomez</strong></p>
          <p>Family</p>
        </a>
      </li>
      <li>
        <aside class="pack-end icon icon-nopic"></aside>
        <a href="#">
          <aside class="icon icon-callout">
            asidecall
          </aside>
          <p>
            Margherita <strong>Gomez</strong>
            <em>(2)</em>
          </p>
          <p>
            <time datetime="17:43">5:43PM</time>
            Mobile, Vivo
          </p>
        </a>
      </li>
    </ul>
  </section>

  <section data-type="list">
    <header>Edit mode</header>
    <ul data-type="edit">
      <li>
        <label class="pack-checkbox danger">
          <input type="checkbox">
          <span></span>
        </label>
        <aside class="pack-end">
          <img alt="placeholder" src="myimage.jpg">
        </aside>
        <a href="#">
          <p>Margherita <strong>Gomez</strong></p>
          <p>Family</p>
        </a>
      </li>
      <li>
        <label class="pack-checkbox danger">
          <input type="checkbox">
          <span></span>
        </label>
        <aside class="pack-end icon icon-nopic"></aside>
        <a href="#">
          <aside class="icon icon-callout"></aside>
          <p>
            Margherita <strong>Gomez</strong>
            <em>(2)</em>
          </p>
          <p>
            <time datetime="17:43">5:43PM</time>
            Mobile, Vivo
          </p>
        </a>
      </li>
    </ul>
  </section>

  <section id="settings-list" role="region" class="skin-organic">
    <section data-type="list">
      <ul>
      <li>
        <a href="#">
          <aside class="icon icon-callout"></aside>
          <p>Phone lock</p>
        </a>
      </li>
      </ul>
    </section>
    <header>
      <h2>Settings style</h2>
    </header>
    <section data-type="list">
      <ul>
        <li>
          <aside class="pack-end">
            <button class="icon icon-dialog">Spain</button>
          </aside>
          <p>Time zone</p>
          <p>Choose your country</p>
        </li>
        <li>
          <aside class="pack-end">
            <label class="pack-switch">
              <input type="checkbox" checked>
              <span></span>
            </label>
          </aside>
          <p>Phone lock</p>
        </li>
      </ul>
    </section>
  </section>

</body>
</html>
